﻿@model ShipmentListModel
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-form-pane layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">开始日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="StartDate" id="StartDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="EndDate" id="EndDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">配送公司</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="ExpressName" id="ExpressName" placeholder="请输入配送公司" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">快递单号</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="TrackingNumber" id="TrackingNumber" placeholder="请输入快递单号" autocomplete="off">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="LAY-app-contlist-search">搜索</button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="LAY-shipment-list" lay-filter="LAY-shipment-list"></table>
            <script type="text/html" id="layuiadmin-app-cont-tagsbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            </script>
        </div>
    </div>
</div>
<script>
    layui.use(['index', 'table'], function () {
        var index = layer.load(2, { shade: false });
        var table = layui.table;
        //分类管理
        table.render({
            elem: '#LAY-shipment-list'
            , url: '@Html.Raw(Url.Action("ShipmentListSelect", "Order"))' //模拟接口
            ,method:'post'
            , page: true //开启分页
            , even: true
            , limit: 15
            , limits: [15, 30, 50, 100]
            , cols: [[
                { type: 'checkbox', field: 'OrderId' }
                , { title: '操作', width: 100, align: 'center', toolbar: '#layuiadmin-app-cont-tagsbar' }
                , { field: 'OrderId', title: '订单ID', minWidth: 100 }
                , { field: 'ShippingStatus', title: '配送状态', minWidth: 100 }
                , { field: 'ExpressName', title: '快递名称', minWidth: 150 }
                , { field: 'TrackingNumber', title: '编号', minWidth: 180 }
                , { field: 'ShippedDate', title: '发货时间', minWidth: 100, templet: '<div>{{ layui.util.toDateString(d.ShippedDate,"yyyy-MM-dd") }}</div>' }
                , { field: 'DeliveryDate', title: '收货时间', minWidth: 100, templet: '<div>{{ layui.util.toDateString(d.DeliveryDate,"yyyy-MM-dd") }}</div>' }
                , { field: 'GoodsName', title: '产品名称', minWidth: 250, templet: '<div>{{d.GoodsName}}{{d.AttributeInfo}}</div>' }
                , { field: 'Sku', title: 'SKU', minWidth: 80 }
                , { field: 'Quantity', title: '数量', minWidth: 50 }
                , { field: 'ItemWeight', title: '重量', minWidth: 50 }
            ]]
            , id: 'testReload'
            , text: { none: '一条数据也没有^_^' }
            , done: function (res, curr, count) {
                merge(res);
                layer.close(index);
            }
            });

            function merge(res){

                var data = res.data;
                var mergeIndex = 0;//定位需要添加合并属性的行数
                var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
                var columsName = ['OrderId', 'OrderId', 'OrderId', 'OrderId', 'OrderId', 'OrderId', 'OrderId', 'OrderId'];//需要合并的列名称
                var columsIndex = [0,1,2,3,4,5,6,7];//需要合并的列索引值

                for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                    var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
                    for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
                        var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
                        var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列

                        if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
                            mark += 1;
                            tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                                $(this).attr("rowspan", mark);
                            });
                            tdCurArr.each(function () {//当前行隐藏
                                $(this).css("display", "none");
                            });
                        } else {
                            mergeIndex = i;
                            mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
                        }
                    }
                    mergeIndex = 0;
                    mark = 1;
                }
            }

        //监听搜索
        layui.form.on('submit(LAY-app-contlist-search)', function (data) {
            var field = data.field;
            console.log(field)
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: field
            }, 'data');
        });
        //监听工具条
        table.on('tool(LAY-shipment-list)', function (obj) {
            var data = obj.data;
             if (obj.event === 'edit') {
                layer.open({
                        type: 2
                        , title: '编辑'
                        , content: '@Url.Action("ShipmentDetails")?orderId=' + data.OrderId
                        , shade: 0.2
                        , maxmin: true
                        , shadeClose: true
                        , area: ['600px', '400px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            
                            var submit = layero.find('iframe').contents().find("#set_system_submit_btn");
                            submit.click();
                        }
                    });
            }
        });
        var $ = layui.$, active = { }
        $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

